<filter-sidebar></filter-sidebar>
<div class="hk-content-sidebar" ng-class="{ 'hk-content-sidebar-expanded': hideSidebar }">
  <div class="card-pf">
    <div class="card-pf-body">

      <div class="form-group">
        <span ng-repeat="property in criteria.properties">
          <span ng-show="property.operator === undefined || property.operator === 'HAS'">
            <a class="btn btn-success" ng-click="toggleExclusion(property)">
              <i>{{property.name}}</i>: {{property.value}}
              <a class="btn btn-default" ng-click="removeProperty(property)">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
              </a>
            </a>
          </span>
          <span ng-show="property.operator === 'HASNOT'">
            <a class="btn btn-danger" ng-click="toggleExclusion(property)">
              <i>{{property.name}}</i>: {{property.value}}
              <a class="btn btn-default" ng-click="removeProperty(property)">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
              </a>
            </a>
          </span>
          <label style="width: 1%" ></label> <!-- TODO: Must be a better way -->
        </span>
      </div>

      <form class="form-inline">
        <div class="form-group hk-aggregation-interval">
          <label for="intervalField">Aggregation Interval:</label>
          <select pf-select class="form-control" id="intervalField" ng-model="config.interval">
            <option value="1000000">1 Second</option>
            <option value="10000000">10 Second</option>
            <option value="30000000">30 Second</option>
            <option value="60000000">1 Minute</option>
            <option value="600000000">10 Minutes</option>
            <option value="3600000000">1 Hour</option>
            <option value="86400000000">1 Day</option>
            <option value="604800000000">7 Day</option>
          </select>
        </div>
        <div class="form-group">
          <button class="btn btn-default" ng-click="toggleStacked()">
            <i class="fa fa-area-chart"></i>
            <span ng-hide="chartStacked">Stack</span><span ng-show="chartStacked">Overlap</span> Data
          </button>
        </div>
        <div class="form-group">
          <label>Last Update:</label>
          <span class="hk-input-text">{{ (sbFilter.criteria.endTime !== '0' ? sbFilter.criteria.endTime : currentDateTime()) | date:'dd MMM yyyy HH:mm:ss'}}</span>
        </div>
        <div class="pull-right">
          <button class="btn" ng-class="sbFilter.criteria.endTime !== '0' ? 'btn-primary' : 'btn-default'" ng-disabled="sbFilter.timeSpan === ''" ng-click="pauseLiveData()">
            <i class="glyphicon" ng-class="sbFilter.criteria.endTime !== '0' ? 'glyphicon-play' : 'glyphicon-pause'" ></i>
            <span ng-show="sbFilter.criteria.endTime === '0'">Pause Live Data</span>
            <span ng-hide="sbFilter.criteria.endTime === '0'">Resume Live Data</span>
          </button>
        </div>
      </form>

      <div id="nodesareachart" class="chart-card" pf-c3-chart config="apmChartConfig" get-chart-callback="getAreaChart"></div>

    </div>
  </div>

  <div class="card-pf">
    <div class="card-pf-body">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th class="col-md-2" ></th>
            <th ng-click="sort('actual')">Actual
              <span class="glyphicon sort-icon" ng-show="sortKey=='actual'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
            <th ng-click="sort('elapsed')">Elapsed
              <span class="glyphicon sort-icon" ng-show="sortKey=='elapsed'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
            <th ng-click="sort('count')">Count
              <span class="glyphicon sort-icon" ng-show="sortKey=='count'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
            <th ng-click="sort('componentType')">Component
              <span class="glyphicon sort-icon" ng-show="sortKey=='componentType'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
            <th ng-click="sort('uri')">URI
              <span class="glyphicon sort-icon" ng-show="sortKey=='uri'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
            <th ng-click="sort('operation')">Operation
              <span class="glyphicon sort-icon" ng-show="sortKey=='operation'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr dir-paginate="summary in summaries|orderBy:sortKey:reverse|filter:$root.sbFilter.search|itemsPerPage:config.maxRows" ng-class="{'danger': getElapsedPercentage(summary) > 80,'warning': getElapsedPercentage(summary) > 60}" >
            <td scope="row">
              <progress>
                <bar type="danger" value="getActualPercentage(summary)">
                </bar>
                <bar type="warning" value="getElapsedMinusActualPercentage(summary)">
                </bar>
              </progress>
            </td>
            <td scope="row">{{ summary.actual | hkDuration }}</td>
            <td scope="row">{{ summary.elapsed | hkDuration }}</td>
            <td>{{summary.count}}</td>
            <td>{{summary.componentType}}</td>
            <td>{{summary.uri}}</td>
            <td>{{summary.operation}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <dir-pagination-controls max-size="config.maxRows" direction-links="true" boundary-links="true" />
</div><!-- .col-md-10 -->
